<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->

          <el-form label-width="80px">
            <el-form-item label="关键字">
              <el-input
                style="width: 370px; height: 32px"
                placeholder="根据编号搜索"
                v-model="page.keyword"
              />
              <el-form-item style="float: right">
                <el-button size="small" @click="clean">清除</el-button>
                <el-button type="primary" size="small" @click="search()"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form-item>
          </el-form>

          <el-alert
            :title="`数据一共${page.total}条`"
            type="info"
            show-icon
            :closable="false"
            style="margin-bottom: 15px"
          />

          <!-- 表格/绑定数据 -->
          <el-table :data="list">
            <el-table-column
              align="center"
              prop="id"
              label="编号"
              width="220"
            />
            <el-table-column
              align="center"
              prop="questionType"
              label="题型"
              width="80"
            >
              <template slot-scope="scope">
                <p v-if="scope.row.questionType == 1">单选</p>
                <p v-else-if="scope.row.questionType == 2">多选</p>
                <p v-else>简答</p>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="题目编号"
              width="220"
              prop="questionIDs"
            >
              <template slot-scope="scope">
                <div
                  v-for="(object, index) in scope.row.questionIDs"
                  :key="index"
                >
                  <a
                    href="javascript:;"
                    @click="subject(object.id)"
                    style="color: #0099ff; cursor: default"
                    >{{ object.number }}</a
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="addTime"
              label="录入时间"
              width="180"
            />
            <el-table-column
              align="center"
              prop="totalSeconds"
              label="答题时间(s)"
            />
            <el-table-column
              align="center"
              prop="accuracyRate"
              label="正确率(%)"
            />
            <el-table-column align="center" prop="userName" label="录入人" />
            <el-table-column label="操作" width="80">
              <template slot-scope="{ row }">
                <el-button
                  align="center"
                  @click="deleteRole(row)"
                  type="danger"
                  icon="el-icon-delete"
                  title="删除"
                  plain
                  circle
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="float: right; margin-top: 25px"
          >
            <!-- 放置分页组件 -->
            <el-row type="flex" justify="right" align="middle">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="prev, pager, next, sizes, jumper"
                :page-sizes="[20, 30, 50, 100]"
                :current-page="page.page"
                :page-size="page.pagesize"
                :total="page.total"
                background
              >
              </el-pagination>
            </el-row>
          </el-row>
        </el-tabs>
      </el-card>
      <!-- 题目预览弹框 -->
      <questionsPreview
        :answerList="answerList"
        :showDialog.sync="showDialog"
      ></questionsPreview>
    </div>
  </div>
</template>

<script>
import { getRoleList, deleteRole, getQuestion } from '@/api/hmmm/questions'
import questionsPreview from '@/module-hmmm/components/questions-preview1.vue'
export default {
  name: 'QuestionsRandoms',
  data () {
    return {
      currentPage1: 1,
      list: [], // 承接数组
      page: {
        // 放置页码及相关数据
        page: 1,
        pagesize: 20,
        total: null, // 记录总数
        keyword: '' // 定义一个关键词
      },
      showDialog: false,
      answerList: {}
    }
  },
  created () {
    this.getRoleList() // 获取角色列表
  },
  components: {
    questionsPreview
  },
  methods: {
    // 清除关键词
    clean () {
      this.page.keyword = ''
      this.page.page = 1
      this.getRoleList()
    },
    // 搜索关键词
    search () {
      this.page.page = 1
      this.getRoleList()
    },
    // 重新渲染当前页面数据
    handleSizeChange (val) {
      // console.log(val)
      this.page.pagesize = val
      this.getRoleList()
    },
    // 重新渲染页码点击事件
    handleCurrentChange (val) {
      // console.log(1)
      this.page.page = val
      this.getRoleList()
    },
    // 页面获取
    async getRoleList () {
      const { data } = await getRoleList(this.page)
      this.page.total = data.counts
      this.list = data.items
      // console.log(this.list)
    },
    // 删除功能
    async deleteRole (id) {
      console.log(id)
      // 提示
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 调用删除接口
        await deleteRole(id)
        // 重新加载数据
        await this.getRoleList(this.page)
        this.$message.success('删除成功')
      } catch (error) {
        // console.log(error);
      }
    },
    // 题目预览弹框
    async subject (id) {
      try {
        this.showDialog = true
        const { data } = await getQuestion({ id })

        this.answerList = data
      } catch (err) {
        // console.log(999);
      }
    }
  }
}
</script>
